<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
	<meta name="description" content="中央气象台官方网站权威发布台风、暴雨、寒潮、高温、沙尘暴、大雾等各类灾害性天气的预报警报。提供天气预报、天气实况、降水量预报、强对流天气预报、农业气象、海洋气象、环境气象、地质灾害气象、交通气象、水文气象、数值预报及预报员交流论坛等栏目"> 
  	<meta name="keywords" content="天气,天气预报,气象"> 
	<title>天气预报</title>
	<link rel="shortcut icon" href="http://image.nmc.cn/static2/favicon.ico"> 
  	<link rel="stylesheet" type="text/css" href="http://image.nmc.cn/static2/site/nmc/themes/basic/css/basic.css?v=20180325_20180517"> 
  	<script src="http://image.nmc.cn/static2/jquery/jquery-1.9.1.min.js?v=20180325" type="text/javascript"></script> 
  	<script src="http://image.nmc.cn/static2/site/nmc/themes/basic/js/doT.min.js?v=20180325" type="text/javascript"></script> 
	<script type="text/javascript">
		var ctx = '/f';
		var ctxStatic = 'http://image.nmc.cn/static2';
	</script> 
	
	<link rel="stylesheet" type="text/css" href="http://image.nmc.cn/static2/site/nmc/themes/basic/css/product_list.css?v=20180325"> 
	<link rel="stylesheet" type="text/css" href="http://image.nmc.cn/static2/site/nmc/themes/basic/css/forecast.css?v=20180325"> 
  
	<style type="text/css">
		body{
			background: url('draw/temp.jpg') no-repeat fixed center top;
		}
		.forecast .day{
			background: url("") no-repeat left top;
			background-color:rgba(0,0,0,0.2);
			width: 168px; height: 310px; float: left; margin-left:5px; text-align: center; padding: 20px 0;
		} 
	</style> 
	
	<script type="text/javascript" src="js/ProCity.js" > </script>
	
	<script type="text/javascript">
	    function reload(){
	    	var valueP = $("#province").val();
	    	var valueC = $("#city").val();
	     	console.log(valueP);
	    	
	        $.ajax({
	            url : "<%=request.getContextPath()%>/com/weather/servlet/WeatherServlet",
	            dataType : "json",
	            async:true,//使用异步方式
	            contentType: "application/x-www-form-urlencoded; charset=utf-8", 
	            type:"POST",
	            data:{"key_pro":valueP,"key_city":valueC},
	            success: function(data){
	            	$("#proTitle").html(data.province);
	            	$("#cityTitle").html(data.city);
	            	$("#cityTitle2").html(data.city);
	            	$("#realTemperature").html(data.temperature);
	            	$("#realRain").html(data.water);
	            	$("#realWindDirect").html(data.windDirect);
	            	$("#realWindPower").html(data.windPower);
	            	$("#aqi").html(data.airQuality);
	            	$("#realHumidity").html(data.humidity);
	            	$("#realIcomfort").html(data.comfort);
	            	$("#realFeelst").html(data.feel);
	            }
	        });
	    }
	</script>
	
</head>

<body>
	<div class="container"> 
		<div class="titlebg home"> 
			<h1 class="navigation">当前位置：全国天气预报&nbsp;&gt;&nbsp;<span id="proTitle"></span>&nbsp;&gt;&nbsp;<span id="cityTitle"></span>天气预报</h1>
			<div class="cityselect"> 
	      		<span>省份<select name="province" id="province" class='province' ><option value="" >-</option></select></span> 
	      		<span>城市<select name="city" id="city" class='city' onChange="reload()"><option value="">-</option></select></span> 
	     	</div> 
	     	
	     	<button style="z-index=13;" onclick="reload()"/>
	    </div> 
	    
    
    	<div class="real"> 
     		<div class="left"> 
      			<div class="cityname"> 
       				<div class="label fl">市/区：</div> 
       				<div class="cname fl"><span id="cityTitle2"/></div> 
      			</div> 
	     		<div class="rcrl"> 
	       			<div id="sun" class="sun"></div> 
	       			<div id="sunrise" class="sunrise">日出</div> 
	       			<div id="sunset" class="sunset">日落</div> 
	     		</div> 
     		</div> 
     		<div class="right"> 
				<p class="livelabel">当前实况<span id="realPublishTime" style="font-size:16px;">更新于：发布</span></p> 
      			<div class="livetable"> 
       				<table> 
        			<tbody>
         				<tr><td colspan="4"> 
		           			<table> 
			            		<tbody>
			             			<tr> 
			              				<td>气温<br><br><span id="realTemperature">&nbsp;</span>℃</td> 
			              				<td class="mdtd">降水<br><br><span id="realRain">&nbsp;</span>mm</td> 
			              				<td>风向风速<br><br><span id="realWindDirect">&nbsp;</span>&nbsp;<span id="realWindPower">-</span></td> 
			             			</tr> 
			            		</tbody>
		           			</table> 
           				</td> </tr> 
         				<tr> 
          					<td>空气质量<br><br><span id="aqi">&nbsp;</span></td> 
          					<td>相对湿度<br><br><span id="realHumidity">&nbsp;</span>%</td> 
          					<td>舒适度<br><br><span id="realIcomfort">&nbsp;</span></td> 
          					<td>体感温度<br><br><span id="realFeelst">&nbsp;</span>℃</td> 
         				</tr> 
        			</tbody>
       				</table> 
      			</div> 
     		</div> 
    	</div> 
    	
    	
    	<div class="btitle">
     		七天天气预报
     		<span  style="font-size:16px;">发布于：</span>
    	</div> 
    	<div id="forecast" class="forecast"> 
     		<div class="detail">
				<div class="day">
					 <div class="date">今天</div> 
					 <div class="week">星期六</div> 
					 <div class="wicon">
					 	<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/1.png">
					 </div> 
					 <div class="wdesc">多云</div> 
					 <div class="temp">8℃ </div> 
					 <div class="direct">东南风</div> 
					 <div class="wind">微风</div> 
				</div> 
			</div> 
     		<div class="detail"> 
      			<div class="day"> 
					<div class="date">明 天</div> 
					<div class="week">星期日</div> 
       				<div class="wicon">
       					<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/0.png">
       				</div> 
       				<div class="wdesc">晴</div> 
       				<div class="temp">10℃ </div> 
       				<div class="direct">西北风</div> 
       				<div class="wind">微风</div> 
      			</div> 
     		</div> 
     		<div class="detail"> 
				<div class="day"> 
					<div class="date">后 天</div> 
					<div class="week">星期一</div> 
					<div class="wicon">
						<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/0.png">
					</div> 
					<div class="wdesc">晴</div> 
					<div class="temp">10℃ </div> 
					<div class="direct">南风</div> 
					<div class="wind">微风</div> 
				</div> 
     		</div> 
			<div class="detail"> 
				<div class="day"> 
					<div class="date">11月20日</div> 
					<div class="week">星期二</div> 
					<div class="wicon">
						<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/1.png">
					</div> 
					<div class="wdesc">多云</div> 
					<div class="temp">10℃</div> 
					<div class="direct">东北风</div> 
					<div class="wind">微风</div> 
				</div> 
			</div> 
			<div class="detail"> 
			    <div class="day"> 
					<div class="date">11月21日</div> 
					<div class="week">星期三</div> 
					<div class="wicon">
						<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/1.png">
					</div> 
					<div class="wdesc">多云</div> 
					<div class="temp">7℃ </div> 
					<div class="direct">西南风</div> 
					<div class="wind"> 微风</div> 
				</div> 
			</div> 
			<div class="detail"> 
			    <div class="day"> 
					<div class="date">11月21日</div> 
					<div class="week">星期三</div> 
					<div class="wicon">
						<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/1.png">
					</div> 
					<div class="wdesc">多云</div> 
					<div class="temp">7℃ </div> 
					<div class="direct">西南风</div> 
					<div class="wind"> 微风</div> 
				</div> 
			</div> 
			<div class="detail"> 
			    <div class="day"> 
					<div class="date">11月21日</div> 
					<div class="week">星期三</div> 
					<div class="wicon">
						<img src="http://image.nmc.cn/static2/site/nmc/themes/basic/weather/white/day/1.png">
					</div> 
					<div class="wdesc">多云</div> 
					<div class="temp">7℃ </div> 
					<div class="direct">西南风</div> 
					<div class="wind"> 微风</div> 
				</div> 
			</div> 
    	</div> 
     	<div class="clear"></div> 
    </div> 
</body>
</html>